<template>
  <div>
    <van-radio-group v-model="radioValue">
      <van-cell-group>
        <van-cell v-for="item in cardData" :key="item.pkgName" clickable @click="handleClick(item)">
          <template #title>
            <div>{{item.pkgName}} ({{`${item.flow}MB/${pkgCycleMap.get(item.pkgCycle)}`}})  <span style="color:#ff976a;margin-left: 10px">{{item.price||'-'}}</span>元</div>
          </template>
          <template #label>
            <div>
              <span>总流量{{`${item.flow}MB`}}，</span>
              <span v-if="item.pkgKind===1">有效期至{{inCreaseMonth(item.pkgCycle===1?1:item.pkgCycle===2?3:item.pkgCycle===3?12:0)}}</span>
              <span v-if='item.pkgKind===2'>有效期与当前主套餐一致</span>
              <span v-if='item.pkgKind===3'>有效期至{{currentMonthLast}}</span>
            </div>
          </template>
          <template #right-icon>
            <van-radio :name="item.pkgName"/>
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
  </div>
</template>

<script>
  import { inCreaseMonth } from '../utils/index'
  import {getCurrentMonthLast} from "../utils";
  const pkgCycleMap = new Map([
    [1,'月'],[2,'季'],[3,'年']
  ])
  export default {
    name: "Dcard",
    data() {
      return {
        radioValue: '',
        pkgCycleMap:pkgCycleMap,
        currentMonthLast:getCurrentMonthLast()
      }
    },
    props:{
      cardData: {
        type: Array,
        default: ()=>[]
      },
      currentExpTime:{
        type: String,
        default: ()=>''
      }
    },
    methods:{
      inCreaseMonth(month){
        return inCreaseMonth(month,this.currentExpTime)
      },
      handleClick(value){
        this.$emit('selectedItem',value)
        console.log(value)
        this.radioValue = value.pkgName
      },
      selectedItem(value){

      }
    }
  }
</script>

<style scoped>

</style>
